<template>
  <div>
<el-upload
  class="upload-demo"
  action="http://d299o16972.qicp.vip/pc/image/upload"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :on-success="handleSuccess"
>
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  methods: {
 handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
       // 监听图片上传成功的事件
  handleSuccess (response) {
      console.log(response)
      // 1. 拼接得到一个图片信息对象
    //   const picInfo = {pic: response.data.tmp_path}
    //   // 2. 将图片信息对象品push到pics数组中
    //   this.addForm.pics.push(picInfo)
    //   // console.log(this.addForm)
    }    
  },
  components: {

  }
}
</script>

<style>

</style>
